<template>
	<view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import {
		onListening,
		cancleListening
	} from '../../api/driver/onListening.js'
	export default {
		props: {
			isOK: {
				
				type: Boolean,
				default () {
					return false;
				}
			},
		},
		data() {
			return {
				status: null, // websocket是否关闭
				lockReconnect: false, // 避免重复连接
				url: null,
				// 心跳检测
				timeout: null, // 多少秒执行检测
				timeoutObj: null, // 检测服务器端是否还活着
				reconnectTimeOutObj: null, // 重连之后多久再次重连
				data: null, // 监听返回数据
				connectTimes: 1 // 重连次数
			};
		},
		computed: {
			...mapGetters([
				'listen',
				'driverCode',
				'name'
			])
		},
		watch: {},
		created() {
			this.init();
			this.initRequest();
		},
		destroyed() {
			let that = this;
			uni.getLocation({
				type: 'gcj02', // 返回国测局坐标
				success: function(res) {
					let driver = {
						driverName: that.name,
						driverCode: that.driverCode,
						longitude: res.longitude,
						latitude: res.latitude
					};
					cancleListening({
						driverOrderDataDto: JSON.stringify(driver)
					});
					that.close();
				},
				fail: function(e) {
					uni.showToast({
						icon: 'none',
						title: '获取地址失败, 请检查是否开启定位权限~~'
					})
				}
			})
			that.close();
		},
		methods: {
			change() {
				// this.$store.dispatch('orderMessage/GETORDER',this.msg);
			},
			// 初始化配置
			init() {
				this.url = 'ws://103.205.254.217:31008/ws/' + this.driverCode,
					this.timeout = 30 * 1000
			},
			// 初始化连接
			initRequest() {
				this.socketTask = uni.connectSocket({
					url: this.url, //接口地址。
					success: () => {
						console.log('连接成功');
						// 返回实例
						return this.socketTask
					}
				})

				this.socketTask.onOpen(res => {
					console.log(res, '连接打开');
					let that = this;
					uni.getLocation({
						type: 'gcj02', // 返回国测局坐标
						success: function(res) {
							console.log(res);
							let driver = {
								driverName: that.name,
								driverCode: that.driverCode,
								longitude: res.longitude,
								latitude: res.latitude
							};
							onListening({
								driverOrderDataDto: JSON.stringify(driver)
							}).catch(err => {
								console.log(err);
							})
						},
						fail: function(e) {
							uni.showToast({
								icon: 'none',
								title: '获取地址失败, 请检查是否开启定位权限~~'
							})
						}
					})
					this.$store.dispatch('listenOrder/DOLISTEN');
					// 清除重连定时器
					clearTimeout(this.reconnectTimeOutObj)
					// 开启检测
					this.haertStart()

				})

				// 如果希望websocket连接一直保持，在close或者error上绑定重新连接方法。
				this.socketTask.onClose((res) => {
					console.log(res, '连接关闭');
					// this.reconnect();
				})

				this.socketTask.onError((res) => {
					console.log(res, '连接错误');
					if (this.connectTimes > 0) {
						this.reconnect();
						this.connectTimes--;
					}
				})

				this.socketTask.onMessage(res => {
					// 重置重连次数
					this.connectTimes = 5;
					// 接受任何消息都说明当前连接是正常的
					this.data = JSON.parse(res.data);
					this.$emit('recieveOrderInfo', this.data);
					this.reset();
					console.log(this.data, 'pong');
				})

			},



			send(value) {
				return new Promise((resovle, reject) => {
					this.socketTask.send({
						data: value,
						success: () => {
							resovle('发送成功')
						}
					})
				})
			},

			// reset和start方法主要用来控制心跳的定时。
			reset() {
				// 清除定时器重新发送一个心跳信息
				clearTimeout(this.timeoutObj);
				this.haertStart();
			},
			haertStart() {
				this.timeoutObj = setTimeout(() => {
					//这里发送一个心跳，后端收到后，返回一个心跳消息，
					//onmessage拿到返回的心跳就说明连接正常
					console.log("ping");
					this.socketTask.send({
						data: "ping"
					});

				}, this.timeout)
			},

			// 重连
			reconnect() {
				// 防止多个方法调用，多处重连
				if (this.lockReconnect) {
					return;
				};
				this.lockReconnect = true;

				console.log('准备重连');
				//没连接上会一直重连，设置延迟避免请求过多
				this.reconnectTimeOutObj = setTimeout(() => {
					// 重新连接
					this.initRequest()

					this.lockReconnect = false;
				}, 2000);
			},
			// 手动关闭
			close() {
				console.log("手动关闭连接");
				this.$store.dispatch('listenOrder/CANCELLISTEN');
				this.socketTask.close()
			}
		}
	}
</script>

<style lang="scss">

</style>
